<template>
  <div class="dashboard-container">
    <el-row type="flex" justify="space-between">
      <el-col :span="13" class="jggs common">
        <el-row>
          <el-col :span="12">
            <h4 class="commonH4">机构概述</h4>
            <div class="jggsCont">
              <h4>{{ organOverview.organName }}</h4>
              <p>{{ organOverview.organAddress }}</p>
              <p>负责人：{{ organOverview.principal }}{{ organOverview.phone }}</p>
              <el-button type="danger">查看营业部分布</el-button>
            </div>
          </el-col>
          <el-col :span="12" class="jgxx">
            <el-row class="jgxxRow">
              <el-col :span="12">
                <div>
                  <span>分拣中心（个）</span>
                  <b>{{ organOverview.sortingCenterNumber }}</b>
                </div>
                <div>
                  <span>司机人数（个）</span>
                  <b>{{ organOverview.driverNumber }}</b>
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <span>营业部（个）</span>
                  <b>{{ organOverview.agencyNumber }}</b>
                </div>
                <div>
                  <span>快递员人数（个）</span>
                  <b>{{ organOverview.courierNumber }}</b>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10" class="todayData common">
        <div class="todayDataCont">
          <el-row class="todayDataTop" type="flex" justify="space-between" align="middle">
            <el-col :span="4" class="commonH4">今日数据</el-col>
            <el-col :span="7" class="commonP"><p><i class="el-icon-refresh" /> 2023-06-07 09:46</p></el-col>
          </el-row>
          <el-row class="todayDataDetail todayDataDetail2">
            <el-col :span="8">
              <p>订单金额（元）</p>
              <h2>{{ todayData.orderAmount }}</h2>
              <p>较昨日 +{{ todayData.orderAmountChanges }}
                <i v-if="todayData.orderAmountChanges > 0" class="el-icon-top" style="color: #f56c6c" />
                <i v-else class="el-icon-bottom" style="color: green" />
              </p>
            </el-col>
            <el-col :span="8">
              <p>订单数量（笔）</p>
              <h2>{{ todayData.orderNumber }} </h2>
              <p>较昨日 +{{ todayData.orderNumberChanges }}
                <i v-if="todayData.orderNumberChanges > 0" class="el-icon-top" style="color: #f56c6c" />
                <i v-else class="el-icon-bottom" style="color: green" />
              </p>
            </el-col>
            <el-col :span="8">
              <p>运输任务（次数）</p>
              <h2>{{ todayData.taskInTransitNumber }}</h2>
              <p>较昨日 +{{ todayData.transportTaskNumberChanges }}
                <i v-if="todayData.transportTaskNumberChanges > 0" class="el-icon-top" style="color: #f56c6c" />
                <i v-else class="el-icon-bottom" style="color: green" />
              </p>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row type="flex" justify="space-between" class="row2">
      <el-col :span="13" class="todayData common">
        <div class="todayDataCont">
          <el-row class="todayDataTop" type="flex" justify="space-between" align="middle">
            <el-col :span="4" class="commonH4">
              代办任务
              <el-tooltip
                class="item"
                effect="light"
                placement="bottom-start"
              >
                <template #content>
                  待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件<br>
                  待派送率=待派送/(待派送+派送中+已签收+拒收)<br>
                  未分配率=未分配/全部数据<br>
                  超时率=超时任务/(已完成+进行中+已取消）
                </template>
                <el-button type="text"><i class="el-icon-warning-outline" /></el-button>
              </el-tooltip>
            </el-col>
            <el-col :span="7" class="commonP"><p><i class="el-icon-refresh" /> 2023-06-07 09:46</p></el-col>
          </el-row>
          <el-row class="todayDataDetail commonCont">
            <el-col :span="6" class="readyTask">
              <div ref="task1" class="task" />
              <p>待取件 <span>{{ backlog.waitingPickupNumber }}</span> </p>
            </el-col>
            <el-col :span="6" class="readyTask">
              <div ref="task2" class="task" />
              <p>待派件 <span>{{ backlog.waitingDispatchNumber }}</span> </p>
            </el-col>
            <el-col :span="6" class="readyTask">
              <div ref="task3" class="task" />
              <p>未分配运输 <span>{{ backlog.unassignedTransportTaskNumber }}</span> </p>
            </el-col>
            <el-col :span="6" class="readyTask">
              <div ref="task4" class="task" />
              <p>超时运输 <span>{{ backlog.timeoutTransportTaskNumber }}</span> </p>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="10" class="todayData common">
        <div class="todayDataCont">
          <el-row class="todayDataTop" type="flex" justify="space-between" align="middle">
            <el-col :span="4" class="commonH4">
              执行中任务
              <el-tooltip
                class="item"
                effect="light"
                placement="bottom-start"
              >
                <template #content>
                  运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消）<br>
                  派送率=派送中/(待派送+派送中+已签收+拒收）
                </template>
                <el-button type="text"><i class="el-icon-warning-outline" /></el-button>
              </el-tooltip>
            </el-col>
            <el-col :span="7" class="commonP"><p><i class="el-icon-refresh" /> 2023-06-07 09:46</p></el-col>
          </el-row>
          <el-row class="todayDataDetail commonCont">
            <el-col :span="12" class="readyTask">
              <div ref="task5" class="task" />
              <p>运输中 <span>39</span> </p>
            </el-col>
            <el-col :span="12" class="readyTask">
              <div ref="task6" class="task" />
              <p>派件中 <span>39</span> </p>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!-- 常用功能 -->
    <div class="cygn">
      <h4 class="commonH4">常用功能</h4>
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="4">
          <div class="cygnDiv">
            <div>
              <i class="el-icon-office-building" />
              <p>快递作业</p>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="cygnDiv">
            <div>
              <i class="el-icon-office-building" />
              <p>运输任务</p>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="cygnDiv">
            <div>
              <i class="el-icon-office-building" />
              <p>线路管理</p>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="cygnDiv">
            <div>
              <i class="el-icon-office-building" />
              <p>车辆管理</p>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="cygnDiv">
            <div>
              <i class="el-icon-office-building" />
              <p>司机管理</p>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="cygnDiv">
            <div>
              <i class="el-icon-office-building" />
              <p>运费查询</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 线路管理 运输任务 -->
    <div class="roadManage">
      <el-row type="flex" justify="space-between">
        <el-col :span="12">
          <div class="common xlgl">
            <h4 class="commonH4">线路管理</h4>
            <div ref="xlglEchart" class="xlglEchart" />
            <div id="map" class="card" style="height: 500px;" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="common ysrw">
            <div class="ysrwT">
              <h4 class="commonH4">运输任务</h4>
              <a href="JavaScript:;">查看更多</a>
            </div>
            <div class="ysrwCont">
              <el-table
                ref="sdangerTable"
                :max-height="tableHeight"
                :data="transportTaskList"
                stripe
              >
                <el-table-column prop="id" label="任务编号" align="center" />
                <el-table-column prop="startAgency" label="起始地" align="center" />
                <el-table-column prop="endAgency" label="目的地" align="center" />
                <el-table-column prop="licensePlate" label="车辆" align="center" />
                <el-table-column prop="id" label="任务状态" align="center">
                  <template #default="{row}">
                    {{ row.status === 1 ? '待提货' : row.status === 2 ? '进行中' : row.status === 3 ? '待确认' : row.status === 4 ? '已完成' : '已取消' }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 订单总量 -->
    <div class="orderTotal">
      <el-row type="flex" justify="space-between">
        <el-col :span="12" class="common col12">
          <div class="commonTop">
            <h1 class="commonH4">订单总量</h1>
            <p>2022-12-2023-05</p>
          </div>
          <div class="orderTotalCont">
            <p>单位：笔</p>
            <div class="orderBody">
              <el-row>
                <el-col :span="8">
                  <b>{{ orderLineChart.orderMaxNumber }}</b>
                  <p>订单最高值</p>
                </el-col>
                <el-col :span="8">
                  <b>{{ orderLineChart.orderAverageNumber }}</b>
                  <p>订单平均值</p>
                </el-col>
                <el-col :span="8">
                  <b>{{ orderLineChart.orderMinNumber }}</b>
                  <p>订单最低值</p>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="common col12">
          <div class="commonTop">
            <h1 class="commonH4">订单分布</h1>
            <p>2022-12-2023-05</p>
          </div>
          <div class="orderTotalCont">
            <p>单位：笔</p>
            <div class="orderBody" />
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <p class="p1">注：工作台展示数据为虚拟数据</p>
      <p class="p2">江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2022 All Rights Reserved 苏ICP备16007882号-11</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { workData } from '@/api/workpench'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  name: 'Dashboard',
  data() {
    return {
      organOverview: {}, // 机构概述
      backlog: {}, // 代办事项
      orderLineChart: {}, // 今日订单总量
      todayData: {}, // 今日数据
      transportTaskList: [], // 运输任务
      proportion: null,
      proportion2: 0.5,
      proportion3: 0.5,
      proportion4: 0.5,
      proportion5: 0.5,
      proportion6: 0.5,
      tableHeight: '350px'
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    proportion(val) {
      this.proportion = val
      setTimeout(() => {
        this.applyEcharts()
      })
    },
    proportion2(val) {
      this.proportion2 = val
      setTimeout(() => {
        this.applyEcharts2()
      })
    },
    proportion3(val) {
      this.proportion3 = val
      setTimeout(() => {
        this.applyEcharts3()
      })
    },
    proportion4(val) {
      this.proportion4 = val
      setTimeout(() => {
        this.applyEcharts4()
      })
    },
    proportion5(val) {
      this.proportion5 = val
      setTimeout(() => {
        this.applyEcharts5()
      })
    },
    proportion6(val) {
      this.proportion6 = val
      setTimeout(() => {
        this.applyEcharts6()
      })
    }
  },
  created() {
    this.getWorkData()
  },
  mounted() {
    this.applyEcharts()
    this.applyEcharts2()
    this.applyEcharts3()
    this.applyEcharts4()
    this.applyEcharts5()
    this.applyEcharts6()

    // this.tableScroll()
  },
  methods: {
    // 表格无缝上下滚动
    // tableScroll() {
    //   clearInterval(this.interval) // 清空定时器 不然有问题const table = this.$refs.sdangerTable; // $refs 拿到dom元素
    //   const table = this.$refs.sdangerTable
    //   const divData = table.bodyWrapper
    //   this.interval = setInterval(() => {
    //     divData.scrollTop += 1
    //     if (
    //       divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight
    //     ) {
    //       if (table.tableData.length > 6) {
    //         divData.scrollTop = 0
    //         this.getScreenOrderItemStatus()
    //       }
    //     }
    //   }, 100)
    // },
    destroyed() {
      clearInterval(this.timer)
    },
    async getWorkData() {
      const data = await workData()
      this.organOverview = data.organOverview
      this.backlog = data.backlog
      this.orderLineChart = data.orderLineChart
      this.todayData = data.todayData
      this.transportTaskList = data.transportTaskList
      console.log(this.transportTaskList)
      this.proportion = this.backlog.waitingPickupRate
      this.proportion2 = this.backlog.waitingDispatchRate
      this.proportion3 = this.backlog.unassignedTransportTaskRate
      this.proportion4 = this.backlog.timeoutTransportTaskRate
      this.proportion5 = this.todayData.taskInTransitRate
      this.proportion6 = this.todayData.taskInDeliveryRate
    },
    applyEcharts() {
      const chartDom = this.$refs.task1
      const myChart = echarts.init(chartDom)
      this.option = {
        backgroundColor: '#fff',
        title: {
          text: '',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: 'rgb(97, 142, 205)'
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            data: [this.proportion / 100], // data个数代表波浪数
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            amplitude: 10, // 波浪起伏
            backgroundStyle: {
              borderWidth: 1,
              borderColor: '#e35c3f',
              color: '#ffe5e0'
            },
            // 修改波浪颜色
            color: ['#e35c3f'],
            label: {
              normal: {
                formatter: this.proportion + '%',
                textStyle: {
                  fontSize: 14,
                  color: '#333'
                }
              }
            },
            outline: {
              show: false
            }
          }
        ]
      }
      myChart.setOption(this.option)
    },
    applyEcharts2() {
      const chartDom = this.$refs.task2
      const myChart = echarts.init(chartDom)
      this.option = {
        backgroundColor: '#fff',
        title: {
          text: '',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: 'rgb(97, 142, 205)'
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            data: [this.proportion2 / 100], // data个数代表波浪数
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            amplitude: 10, // 波浪起伏
            backgroundStyle: {
              borderWidth: 1,
              borderColor: '#ffc45e',
              color: '#fff1d9'
            },
            // 修改波浪颜色
            color: ['#ffc45e'],
            label: {
              normal: {
                formatter: this.proportion2 + '%',
                textStyle: {
                  fontSize: 14,
                  color: '#333'
                }
              }
            },
            outline: {
              show: false
            }
          }
        ]
      }
      myChart.setOption(this.option)
    },
    applyEcharts3() {
      const chartDom = this.$refs.task3
      const myChart = echarts.init(chartDom)
      this.option = {
        backgroundColor: '#fff',
        title: {
          text: '',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: 'rgb(97, 142, 205)'
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            data: [this.proportion3 / 100], // data个数代表波浪数
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            amplitude: 10, // 波浪起伏
            backgroundStyle: {
              borderWidth: 1,
              borderColor: '#ffead7',
              color: '#ffead7'
            },
            // 修改波浪颜色
            color: ['#ff9b41'],
            label: {
              normal: {
                formatter: this.proportion3 + '%',
                textStyle: {
                  fontSize: 14,
                  color: '#333'
                }
              }
            },
            outline: {
              show: false
            }
          }
        ]
      }
      myChart.setOption(this.option)
    },
    applyEcharts4() {
      const chartDom = this.$refs.task4
      const myChart = echarts.init(chartDom)
      this.option = {
        backgroundColor: '#fff',
        title: {
          text: '',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: 'rgb(97, 142, 205)'
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            data: [this.proportion4 / 100], // data个数代表波浪数
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            amplitude: 10, // 波浪起伏
            backgroundStyle: {
              borderWidth: 1,
              borderColor: '#fafade',
              color: '#fafade'
            },
            // 修改波浪颜色
            color: ['#edde83'],
            label: {
              normal: {
                formatter: this.proportion4 + '%',
                textStyle: {
                  fontSize: 14,
                  color: '#333'
                }
              }
            },
            outline: {
              show: false
            }
          }
        ]
      }
      myChart.setOption(this.option)
    },
    applyEcharts5() {
      const chartDom = this.$refs.task5
      const myChart = echarts.init(chartDom)
      this.option = {
        backgroundColor: '#fff',
        title: {
          text: '',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: 'rgb(97, 142, 205)'
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            data: [this.proportion5 / 100], // data个数代表波浪数
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            amplitude: 10, // 波浪起伏
            backgroundStyle: {
              borderWidth: 1,
              borderColor: '#e35c3f',
              color: '#ffe5e0'
            },
            // 修改波浪颜色
            color: ['#e35c3f'],
            label: {
              normal: {
                formatter: this.proportion5 + '%',
                textStyle: {
                  fontSize: 14,
                  color: '#333'
                }
              }
            },
            outline: {
              show: false
            }
          }
        ]
      }
      myChart.setOption(this.option)
    },
    applyEcharts6() {
      const chartDom = this.$refs.task6
      const myChart = echarts.init(chartDom)
      this.option = {
        backgroundColor: '#fff',
        title: {
          text: '',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: 'rgb(97, 142, 205)'
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            data: [this.proportion5 / 100], // data个数代表波浪数
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            amplitude: 10, // 波浪起伏
            backgroundStyle: {
              borderWidth: 1,
              borderColor: '#ffc45e',
              color: '#fff1d9'
            },
            // 修改波浪颜色
            color: ['#ffc45e'],
            label: {
              normal: {
                formatter: this.proportion6 + '%',
                textStyle: {
                  fontSize: 14,
                  color: '#333'
                }
              }
            },
            outline: {
              show: false
            }
          }
        ]
      }
      myChart.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
// 机构概述
.commonH4 {
  font-size: 14px;
  margin-top: 0;
  text-align: left;
  button {
    padding: 0;
  }
}
.common {
  padding: 16px 10px;
  background-color: #fff;
  height: 230px;
  box-sizing: border-box;
}
.commonP {
  text-align: right;
  p{
    margin: 0;
  }
}
.commonCont {
  margin-top: 10px
}
.jggs {
  .jggsCont {
    padding-left: 4px;
  }
  .jgxx {
    text-align: center;
    border-left: 1px solid #efefef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .jgxxRow {
      width: 100%;
      div{
        padding: 20px 0;
        span {
          display: block;
          font-size: 12px;
        }
        b {
          font-size: 24px;
          color: rgb(225, 85, 54)
        }
      }
    }

  }
}
.todayData {
  text-align: center;
  .todayDataDetail {
    p {
      margin-top: 0;
    }
    i {
      color: rgb(225, 85, 54)
    }
  }
}
.row2 {
  margin-top: 20px;
}
.task {
  height: 130px;
  width: 130px;
}
.readyTask {
  div {
    margin: 0 auto;
  }
  span {
    color: rgb(225, 85, 54)
  }
}
.cygn {
  margin-top: 20px;
  background-color: #fff;
  padding: 16px 10px;
  .el-col {
    width: 15%;
    .cygnDiv {
      background-color: #fafafb;
      height: 146px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 100%;
      font-size: 14px;
      &:hover {
        cursor: pointer;
        color: rgb(225, 85, 54)
      }
    }
  }
}

.roadManage {
  margin-top: 20px;
  .el-col {
    width: 49.5%;
  }
  .common {
    height: auto;
  }
  .ysrwT {
    display: flex;
    justify-content: space-between;
    a {
      font-size: 14px;
    }
  }
}
.el-table__body{
   position: absolute;
   transition: all 500ms linear;
}
.orderTotal {
  margin-top: 20px;
  .col12 {
    height: 582px;
    width: 49.5%;
    background-color: #fff;
  }
  .commonTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      margin: 0
    }
  }
  .orderTotalCont {
    p {
      margin-top: 0;
      color: #666
    }
  }
  .orderBody {
    text-align: center;
    margin-top: 10px;
    b {
      display: block;
      margin: 20px 0;
      color: rgb(225, 85, 54);
      font-size: 30px;
    }
    p {
      font-size: 16px
    }
  }
}
.el-col-10 {
  width: 44.5%
}
.footer {
  padding: 0 0 20px 20px;
  .p1 {
    color:#818693;
    text-align: right;
  }
  .p2 {
    color: rgb(186, 192, 205);
    text-align: center;
  }
}
.todayDataDetail2 {
  margin-top: 22px
}
</style>
